<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>资源管理</title>
    <#include "/pubHeadStyleTree.html">
        </head>
<body>
<div style="position: relative;height: 534px">
    <div class="resShowHide">
        <div class="ccpui-trees" style="top:10px">
            <p class="isShowTree colorSwitch">
                <span style="float: left;color: #fff">&nbsp;&nbsp;资源树</span>
                <i layadmin-event="treeFlexible" class="layui-icon layui-icon-prev"></i>
            </p>
            <div style="margin-top: 6px;">
                <ul class="ccpui-iconTree iconTrees">
                    <li><a class="iconfont iconshuaxin- zTrees-refresh" title="刷新"></a></li>
                    <li><a class="iconfont iconwenjianjia1-copy zTrees-triangle-d" title="展开"></a></li>
                    <li><a class="iconfont iconfolder1 zTrees-triangle-r" title="收起"></a></li>
                    <input type="text" style="width: 50%" class="resZtreeValues">
                </ul>
                <ul id="treeSelectResource" class="ztree" style="background: #fff;height: 422px;overflow: auto;"></ul>
            </div>
        </div>
        <div class="ccpui-coreContent" style="top:10px" id="menuViewInformation">
            <div class="layui-fluid" style="top: 0;padding-top: 0">
                <div class="layui-col-xs12">
                    <div class="layui-card" style="height: auto;">
                        <div class="layui-card-body">
                            <form class="layui-form resAddForms" action="" lay-filter="resAddForms">
                                <div class="layui-form-item">
                                    <div class="layui-input-block" style="margin:0;">
                                        <a lay-submit lay-filter="resAddForm" class="layui-btn">保存</a>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">资源名称:<span style="color:red">*</span></label>
                                    <div class="layui-input-block">
                                        <input type="text" name="resName" autocomplete="off"
                                               class="layui-input resNames" maxlength="32" lay-verify="required|names">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">资源别名:<span style="color:red">*</span></label>
                                    <div class="layui-input-block">
                                        <input type="text" name="alias" maxlength="32" autocomplete="off"
                                               class="layui-input alias" lay-verify="required|alias">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">资源图标:</label>
                                    <div class="layui-input-block" style="line-height: 36px">
                                        <i class="iconfont" id="iconShow"></i>
                                        <span class="layui-btn iconSelect">请选择</span>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">默认地址:</label>
                                    <div class="layui-input-block">
                                        <input type="text" class="layui-input" name="defaultUrl" id="defaultUrl" lay-verify="defaultUrl">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">是否有子节点:</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="isFolder" value="1" title="是" checked>
                                        <input type="radio" name="isFolder" value="0" title="否">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">显示到菜单:</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="isDisplayInMenu" value="1" title="是" checked>
                                        <input type="radio" name="isDisplayInMenu" value="0" title="否">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">默认打开:</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="isOpen" value="1" title="是" checked>
                                        <input type="radio" name="isOpen" value="0" title="否">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">是否打开新窗口:</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="isNewOpen" value="1" title="是">
                                        <input type="radio" name="isNewOpen" value="0" title="否" checked>
                                    </div>
                                </div>
                                <input type="text" name="official" class="layui-input layui-hide" value="1">
                                <input type="text" name="parentId" class="layui-input layui-hide">
                                <input type="text" name="systemId" class="layui-input layui-hide">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="nodeSorting" hidden style="display: none">
    <div class="selcetData">
        <table style="width:100%">
            <tr>
                <td class="right">
                    <select class="rightData" multiple="multiple" style="margin-top: 10px">
                    </select>
                </td>
                <td class="left">
                    <span class="layui-btn moveTop">顶部</span>
                    <span class="layui-btn moveUp">向上</span>
                    <span class="layui-btn moveDown">向下</span>
                    <span class="layui-btn moveBottom">底部</span>
                </td>
            </tr>
        </table>
    </div>
    <div style="margin: 15px;text-align: center">
        <button class="layui-btn" lay-filter="resAddeditForm">保存</button>
        <button class="layui-btn cancelNodeSorting layui-btn-danger">取消</button>
    </div>
</div>
<div class="menuGenDetermine" hidden style="display: none">
    <p style="margin: 10px">将生成如下菜单</p>
    <div id="menuGenDetermine"></div>
    <div style="text-align:right ;margin: 10px">
        <button class="layui-btn saveMenus">确定</button>
    </div>
</div>
<input type="hidden" id="resIdSelect">
<input type="hidden" id="resParentId">
<input type="hidden" id="orgIdSelect">
<style>
    .layui-form-label{
        width: 110px;
    }
    .layui-input-block {
        margin-left: 155px;
    }
    .resShowHide{
        bottom: -20px;
    }
</style>
<script>
    var selectResId = "";//资源树id
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index', 'table', 'layer', 'form', 'setter', 'upload', 'commons'], function () {
        var table = layui.table, layer = layui.layer, form = layui.form, $ = layui.jquery,
            setter = layui.setter, upload = layui.upload, commons = layui.commons;
        form.render();
        $('body > .importResources').remove();
        $('body').append($('.importResources'));
        $('body > .nodeSorting').remove();
        $('body').append($('.nodeSorting'));
        $('body > .menuGenerations').remove();
        $('body').append($('.menuGenerations'));
        $('body > .menuGenDetermine').remove();
        $('body').append($('.menuGenDetermine'));
        var formKey = '${formKey}';
        resZtrees();
        layui.resZteeRef = function () {
            resZtrees();
        };

        function resZtrees() {
            var setting = {
                view: {
                    showLine: true,
                    nameIsHTML: true, //允许name支持html
                    selectedMulti: false,
                    showIcon: showIconForTree
                },
                edit: {
                    enable: false,
                    editNameSelectAll: false
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "resId",
                        pIdKey: "parentId"
                    }
                },
                async: {
                    enable: true,
                    type:'get',
                    dataType:'json',
                    url:serverPath.systemPath + setter.sysLinkPath + "sysRes/getSystemTreeData",
                    autoParam:["resId"]
                },
                callback: {
                    onClick: onClickResouse
                }
            };
            $.fn.zTree.init($("#treeSelectResource"), setting);
            component.fuzzySearch('treeSelectResource', '.resZtreeValues', null, true); //初始化模糊搜索方法

            function showIconForTree(treeId, treeNode) {
                return treeNode.iconSkin==null;
            };
        }

        function onClickResouse(event, treeId, treeNode) {
            selectResId= treeNode.resId;
        }

        function hideRMenu() {
            if ($("#resRightMenus")) $("#resRightMenus").css({"visibility": "hidden"});
            $("body").unbind("mousedown", onBodyMouseDown);
        }

        function onBodyMouseDown(event) {
            if (!(event.target.id == "orgRightMenu" || $(event.target).parents("#resRightMenus").length > 0)) {
                $("#resRightMenus").css({"visibility": "hidden"});
            }
        }

        $(".cancelNodeSorting").click(function () {
            layer.close(nodeSors);
        });

        //展开
        $(".iconTrees .zTrees-triangle-d").click(function () {
            $.fn.zTree.getZTreeObj("treeSelectResource").expandAll(true);
        });
        //收起
        $(".iconTrees .zTrees-triangle-r").click(function () {
            $.fn.zTree.getZTreeObj("treeSelectResource").expandAll(false);
        });
        //刷新
        $(".iconTrees .zTrees-refresh").click(function () {
            resZtrees();
        });
        form.render();
        var menuIndex = parent.layer.getFrameIndex(window.name);
        form.verify(commons.formVerify);
        var data = JSON.parse(localStorage.getItem('infos'));
        $("#defaultUrl").val("/system/fileManagement/view/listMenu?parentId="+data.parentId+"&parentType="+data.parentType+"&topFolderId="+data.parentId);
        form.on('submit(resAddForm)', function (data) {
            var iconClassName = "";
            iconClassName = $('#iconShow').attr('class').trim().split(" ");
            data.field.iconSkin = iconClassName[2];
            if (selectResId == "") {
                layer.alert("请从左边的资源树上选择父节点！");
                return false;
            }
            data.field.parentId = selectResId;
            $.ajax({
                url: serverPath.systemPath + setter.sysLinkPath + "sysRes/add",
                type: "POST",
                dataType: 'json',
                data: data.field,
                success: function (data) {
                    if (data.code === 0) {
                        layer.alert(data.msg,function(index){
                            layer.close(index);
                            parent.layer.closeAll();
                        });
                    } else {
                        window.parent.layer.alert(data.msg);
                    }
                }
            });
        });

        $(".iconSelect").click(function () {
            layer.open({
                type: 2,
                area: ['860px', '505px'],
                title: ['选择图标'],
                content: serverPath.systemPath + setter.sysLinkPath + 'sysRes/view/icons'
            });
        });
        //自动生成别名
        $(".resNames").change(function () {
            var str = $(this).val();
            if (str == "") return;
            var arrRslt = component.chineseToPinyinAlias(str);
            $(".alias").val(arrRslt[0]);
        });
    })
</script>
</body>
</html>